<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('计划的标准及大棚信息')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-ncWork-edit">
        <input id="planId" name="planId" th:value="${planId}" type="hidden">


        <!--<div class="form-group">
            <label class="col-sm-3 control-label">标准：</label>
            <div class="col-sm-8">
                <select readonly id="post" name="standardId" class="form-control m-b select2-multiple">
                    <option th:each="standard:${standards}" th:value="${standard.standardId}"
                            th:text="${standard.standardName}" th:selected="${standard.flag}"></option>
                </select>
            </div>
        </div>-->

        <hr>
        <div class="added-div">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">大棚：</label>
                    <div class="col-sm-8">
                        <div class="input-group">
                            <input name="deptName" class="form-control" type="text" onclick="selectDeptTree(this)"
                                   required>
                            <span class="input-group-addon"><i class="fa fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">面积(亩)：</label>
                    <div class="col-sm-6">
                        <input name="area" placeholder="请输入面积" class="form-control" step="0.01" type="number" required>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div>
        <button style="margin: 0px auto;display: table;" class="btn btn-new btn-primary btn-circle btn-lg"
                type="button"><i
                class="fa fa-plus"></i>
        </button>
    </div>
</div>
<div th:include="include::footer"></div>

<script th:inline="javascript" type="text/javascript">
    var prefix = ctx + "system/ncWork";
    var c_element;
    var index = 0;
    var planId = [[${planId}]];
    $(function () {
        getPengsList();
    });
    $("#form-ncWork-edit").validate({
        rules: {
            xxxx: {
                required: true,
            },
        },
        focusCleanup: true
    });

    function submitHandler() {

        var url = prefix + '/daPeng'
        if ($.validate.form()) {
            // $.operate.save(prefix + "/edit", $('#form-ncWork-edit').serialize());
            var list = [];
            $('.added-div').each(function (i, e) {
                var e1 = $(e).find('input')[0];
                var e2 = $(e).find('input')[1];
                var obj = {deptId: $(e1).attr('deptId'), deptName: $(e1).val(), area: $(e2).val()}
                list.push(obj)
            });

            myPost(url, {daPengs: list, planId: planId},
                function (data) {

                    if (data.code == 0) {
                        $.modal.close();
                        parent.$.modal.msgSuccess(data.msg);
                    } else {
                        layer.msg(data.msg);
                    }
                }, function (e) {
                    layer.msg("添加失败!");
                })

        }
    }


    /*用户管理-修改-选择部门树*/
    function selectDeptTree(e) {

        c_element = e;
        var deptId = $.common.isEmpty($("#treeId").val()) ? "100" : $("#treeId").val();
        var options = {
            title: '选择部门',
            width: "380",
            url : ctx + "system/dept/selectDeptTree/" + deptId + "?level=1&rank=2&"+'parentIds=101,',
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero) {
        console.log(c_element)
        var tree = layero.find("iframe")[0].contentWindow.$._tree;
        if ($.tree.notAllowParents(tree)) {
            var body = layer.getChildFrame('body', index);
            $(c_element).attr('deptId', body.find('#treeId').val());
            $(c_element).val(body.find('#treeName').val());
            layer.close(index);
        }
    }

    //新增一行
    $('.btn-new').click(function () {
        index++;
        addRows(index);
    });

    /*移除一行*/
    function doRemove(e) {
        $(e).parents(".added-div").remove();
    }

    //获取历史数据
    function getPengsList() {
        var url = prefix + '/daPengList'
        myPost(url, {planId: planId},
            function (data) {
                if (data.code == 0) {
                    for (var i = 0; i < data.rows.length - 1; i++) {
                        addRows(i + 1);
                    }
                    $('.added-div').each(function (i, e) {
                        var obj = data.rows[i];
                        var input1 = $(e).find('input')[0];
                        var input2 = $(e).find('input')[1];
                        $(input1).attr('deptId', obj.deptId);
                        $(input1).val(obj.deptName);
                        $(input2).val(obj.area);
                    });
                }
            }, function (e) {
                layer.msg(e.msg);
            })
    }

    /*增加一行 输入框*/
    function addRows(index, obj) {
        var str = '<div class="added-div"><div class="col-sm-6">' +
            '            <div class="form-group">' +
            '                <label class="col-sm-4 control-label">大棚：</label>' +
            '                <div class="col-sm-8">' +
            '                    <div class="input-group">' +
            '                        <input name="deptName_' + index + '" class="form-control" type="text" onclick="selectDeptTree(this)"' +
            '                               required>' +
            '                        <span class="input-group-addon"><i class="fa fa-search"></i></span>' +
            '                    </div>' +
            '                </div>' +
            '            </div>' +
            '        </div>' +
            '        <div class="col-sm-6">' +
            '            <div class="form-group">' +
            '                <label class="col-sm-4 control-label">面积(亩)：</label>' +
            '                <div class="col-sm-6">' +
            '                    <input name="area_' + index + '" placeholder="请输入面积" rou class="form-control" step="0.01" type="number" required>' +

            '                </div>' +
            '<button onclick="doRemove(this)" class="btn btn-danger btn-circle" type="button"><i class="fa fa-remove"></i></button> ' +

            '            </div>' +
            '        </div>' +
            '        </div>';
        $('#form-ncWork-edit').append(str)
        $('#form-ncWork-edit').change();


    }

</script>
</body>
</html>
